<template>
  <div class="container">
    <nav-bar v-show="navBarIsShow" :title="store.pageTitle"></nav-bar>
    <router-view v-slot="{ Component }">
      <scroll-wrap>
        <component :is="Component" />
      </scroll-wrap>
    </router-view>
    <tab-bar v-show="tabBarIsShow" :dataList="tabBarList" :initIndex="initIndex"></tab-bar>
    <Loading ref="loading"></Loading>
  </div>
</template>


<script setup>
import { onMounted, toRefs, ref, provide } from 'vue';
import { usePageTitle } from '@/store/base.js';
import toggleRouter from '@/hooks/toggleRouter.js';

const store = usePageTitle();

const {
  navBarIsShow,
  tabBarIsShow,
  initIndex,
  navTitle,
  tabBarList
} = toRefs(toggleRouter());

const loading = ref(null);

onMounted(() => {
  provide('loading', loading.value);
})
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #eee;
}
</style>
